const path = require('path');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const htmlWebpackPlugin = require("html-webpack-plugin");

const  {  VueLoaderPlugin  }  =  require('vue-loader')

module.exports = {
    entry: path.join(__dirname, "../src/main.js"), //入口文件
    output: {
        path: path.join(__dirname, '../dist'), //指定输出目录
        filename: "bundle.js", //指定输出文件
    },
    module: {
        rules: [{
                test: /\.(png|jpg|gif|ttf|ico|jpeg)$/,
                use: {
                    loader: "url-loader",
                    options: {
                        limit: 10 * 1024,
                        esModule: false
                    }
                }
            },

            {
                test: /\.less/, //处理.less文件
                loader: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.js$/, //将.js文件中的es6语法转换成es5语法

                loader: 'babel-loader',
                exclude: /node_modules/, //nodejs依赖库中的js文件全部都不需要进行转换

            },
            {
                test: /.css$/,
                loader: ['style-loader', 'css-loader']
            },
            {
                test: /.html$/,
                loader: ['html-loader']
            },

            {
                test: /\.vue$/,
                use: 'vue-loader'
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(), //清空dist文件夹
        new htmlWebpackPlugin({ //生成引用bundle.js的HTML
            title: "this is Vue",
            filename: 'index.html',
            template: path.join(__dirname, "../public/index.html")
        }),
        new VueLoaderPlugin()

    ]
}